import {
  levelOneTpl, levelTwoTpl,
  fromLevelTwoTpl, levelThreeTpl, levelFourTpl,
  fromLevelThreeTpl
} from './tpl-help'

export const repeatTips = (key = 'NAME0') => {
  return `
    accnoList() {
      const list = this.list
      const map = {}
      const result = []
      console.log('this.list')
      console.log(this.list)
      list && list.forEach(item => {
        const data = item.data
        data.forEach(child => {
          const { ${key} } = child
          if (map[${key}] && ${key} &&  ${key} !== '总计') {
            result.push(${key})
          }
          map[${key}] = true
        })
      })
      console.log(result)
      return result
    }
  `
}

export const getSummaries = (param) => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '汇总'
      return
    }
    const values = data.map(item => Number(item[column.property]))
    if (!values.every(value => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)
      sums[index] += ''
    } else {
      sums[index] = 'N/A'
    }
  })

  return sums
}

const PlaceHolder = {
  ElementCss: '___ElementCss___',
  ElementJs: '___ElementJs___',
  VueJs: '___VueJs___'
}

export const getTpl = ({ data }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
      <div style="padding: 10px;">
        <div v-for="(t, i) in list" :key="i" class="table-item">
          <h3 v-if="t.accno" v-cloak>{{t.accno}}</h3>
          <el-table
            :data="t.data"
            border
            fit
            :row-style="tableRowStyle"
            :row-class-name="tableRowClass"
            :header-cell-style="{backgroundColor: '#f5f7fa'}"
            style="width: 100%;"
          >
            <template v-if="t.label == 1">
              ${levelOneTpl}
            </template>
            <template v-else-if="t.fromLevel == 2 && t.label == 2">
              ${fromLevelTwoTpl}
            </template>
            <template v-else-if="t.label == 2">
              ${levelTwoTpl}
            </template>
            <template v-else-if="t.fromLevel == 3 && t.label == 3">
              ${fromLevelThreeTpl}
            </template>
            <template v-else-if="t.label == 3">
              ${levelThreeTpl}
            </template>
            <template v-else-if="t.label == 4">
              ${levelFourTpl}
            </template>
          </el-table>
        </div>
        <div style="margin: 10px 0;" v-if="accnoList && accnoList.length" >
          <span>重复的账号: </span>
          <span>{{ accnoList.join(',') }}</span>
        </div>
      </div>
      </div>
    </body>
      <script>${PlaceHolder.VueJs}</script>
      <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: ${JSON.stringify(data)},
              tableData: ${JSON.stringify(data)}
            }
          },
          computed: {
            ${repeatTips('NAME0')}
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
            formatMoney (val, w = 2) {
              // 金额转换 分->元 保留2位小数 并每隔3位用逗号分开 1,234.56
              const str = (val / 1).toFixed(w) + ''
              const intSum = str.substring(0, str.indexOf('.')).replace(/\\B(?=(?:\\d{3})+$)/g, ',')// 取到整数部分
              const dot = str.substring(str.length, str.indexOf('.'))// 取到小数部分搜索
              const ret = intSum + dot
              return ret
            },
            tableRowStyle ({ row, rowIndex }) {
              if (rowIndex === 0) {
                return {
                  backgroundColor: '#7392a6',
                  color: '#ffffff'
                }
              }
              return ''
            },
            tableRowClass ({ row, rowIndex }) {
              if (rowIndex === 0) {
                return 'table-row-first'
              }
              return ''
            },
            getSummariesMethod (t) {
              return (param) => {
                return this.getSummaries(param, t)
              }
            },
            getSummaries (param, total) {
              const { columns } = param
              const sums = []
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '总计'
                  return
                }
                const key = column.property
                if (total[key] && typeof total[key] === 'string') {
                  sums[index] = total[key]
                } else {
                  sums[index] = 'N/A'
                }
              })

              return sums
            }
          }
        })
      </script>
    </html>
  `
}

export const getXgameTpl = ({ data }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
      <div style="padding: 10px;">
        <div v-for="(t, i) in list" :key="i" class="table-item">
          <h3 v-if="t.name" v-cloak>{{t.name}}</h3>
          <el-table
            :data="t.data"
            border
            fit
            :header-cell-style="{backgroundColor: '#f5f7fa'}"
            style="width: 100%;"
          >
            <el-table-column prop="UserCode" label="代理"> </el-table-column>
            <el-table-column prop="Name" label="名称"> </el-table-column>
            <el-table-column prop="WagerCount" label="注数"> </el-table-column>
            <el-table-column prop="Stake" label="下注金额"> </el-table-column>
            <el-table-column prop="EffectiveStake" label="有效金额"> </el-table-column>
            <el-table-column prop="UserWinLossResult.Member" label="会员结果"> </el-table-column>
            <el-table-column prop="UserWinLossResult.Agent" label="代理结果"> </el-table-column>
            <el-table-column prop="UserIncentiveResult.Agent" label="代理输赢"> </el-table-column>
            <el-table-column prop="UserWinLossResult.MA" label="总代理结果"></el-table-column>
            <el-table-column prop="UserWinLossResult.SMA" label="总代理输赢"> </el-table-column>
            <el-table-column prop="UserWinLossResult.SMA" label=股东结果"> </el-table-column>
            <el-table-column prop="UserWinLossResult.SSMA(待定)" label="股东输赢"> </el-table-column>
            <el-table-column prop="UserWinLossResult.SSMA" label="总代理成数"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div style="margin: 10px 0;" v-if="accnoList && accnoList.length" >
        <span>重复的账号: </span>
        <span>{{ accnoList.join(',') }}</span>
      </div>
    </div>
    </body>
      <script>${PlaceHolder.VueJs}</script>
      <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: ${JSON.stringify(data)},
              tableData: ${JSON.stringify(data)}
            }
          },
          computed: {
            ${repeatTips('UserCode')}
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
          }
        })
      </script>
    </html>
  `
}

export const getIsnTpl = ({ data }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
        <div style="padding: 10px;">
          <div v-for="(t, i) in list" :key="i" class="table-item">
            <h3 v-if="t.name" v-cloak>{{t.name}}</h3>
            <el-table
              :data="t.data"
              border
              fit
              :header-cell-style="{backgroundColor: '#e1e1e1', color: '#000'}"
              style="width: 100%;"
            >

              <el-table-column prop="summary.groupName" label="用户昵称"></el-table-column>
              <el-table-column prop="summary.alternateName" label="昵称"></el-table-column>
              <el-table-column prop="summary.currencyCode" label="货币"></el-table-column>
              <el-table-column label="交易额">
                <el-table-column prop="summary.effectiveTurnOver" label="实"></el-table-column>
                <el-table-column prop="summary.uplineTurnOver" label="上线"></el-table-column>
                <el-table-column prop="summary.turnOver" label="总计"></el-table-column>
              </el-table-column>
              <el-table-column prop="summary.incentivePaid" label="总佣金"></el-table-column>
              <el-table-column prop="summary.payout" label="赢额"></el-table-column>
              <el-table-column label="总代理">
                <el-table-column prop="downLines.winLoss" label="盈亏"></el-table-column>
                <el-table-column prop="downLines.grossComm" label="佣金"></el-table-column>
                <el-table-column prop="downLines.grossProfit" label="总计"></el-table-column>
              </el-table-column>
              <el-table-column prop="company" label="公司"></el-table-column>
            </el-table>
            <div style="padding-left: 20px;" v-for="sub in t.data" :key="sub.groupName">
              <h4 v-if="sub.children" v-cloak :key="i">{{ sub.groupName }}</h4>
              <el-table
                v-if="sub.children && sub.children.length"
                :data="sub.children"
                border
                fit
                :header-cell-style="{backgroundColor: '#e1e1e1', color: '#000'}"
                style="width: 100%;"
              >

                <el-table-column prop="summary.groupName" label="用户昵称"></el-table-column>
                <el-table-column prop="summary.alternateName" label="昵称"></el-table-column>
                <el-table-column prop="summary.currencyCode" label="货币"></el-table-column>
                <el-table-column label="交易额">
                  <el-table-column prop="summary.effectiveTurnOver" label="实"></el-table-column>
                  <el-table-column prop="summary.uplineTurnOver" label="上线"></el-table-column>
                  <el-table-column prop="summary.turnOver" label="总计"></el-table-column>
                </el-table-column>
                <el-table-column prop="summary.incentivePaid" label="总佣金"></el-table-column>
                <el-table-column prop="summary.payout" label="赢额"></el-table-column>
                <el-table-column label="总代理">
                  <el-table-column prop="downLines.winLoss" label="盈亏"></el-table-column>
                  <el-table-column prop="downLines.grossComm" label="佣金"></el-table-column>
                  <el-table-column prop="downLines.grossProfit" label="总计"></el-table-column>
                </el-table-column>
                <el-table-column prop="company" label="公司"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </body>
      <script>${PlaceHolder.VueJs}</script>
      <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: ${JSON.stringify(data)},
              tableData: ${JSON.stringify(data)}
            }
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
            getObjData (obj, key) {
              if (key.indexOf('.') > -1) {
                const keys = key.split('.')
                const data = obj[keys[0]]
                keys.splice(0, 1)
                const newKey = keys.join('.')
                return this.getObjData(data, newKey)
              }
              return obj[key]
            },
            formatMoney (val, w = 2) {
              // 金额转换 分->元 保留2位小数 并每隔3位用逗号分开 1,234.56
              const str = (val / 1).toFixed(w) + ''
              const intSum = str.substring(0, str.indexOf('.')).replace(/\\B(?=(?:\\d{3})+$)/g, ',')// 取到整数部分
              const dot = str.substring(str.length, str.indexOf('.'))// 取到小数部分搜索
              const ret = intSum + dot
              return ret
            },
            summaryMethod(param) {
              const { columns, data } = param
              const sums = []
              console.log(data)
              console.log('get summary')
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '汇总'
                  return
                }
                if (data[0] && data[0].total) {
                  sums[index] = data[0].total[column.property] || 'N/A'
                }
              })

              return sums
            }
          }
        })
      </script>
    </html>
  `
}

export const getIsnFeeTpl = ({ data, name }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
        <div style="padding: 10px;" v-for="(item, i) in list">
          <h3 v-cloak :key="i">{{item.name}}</h3>
          <div v-for="(t, i) in item.data" :key="i" class="table-item">
            <p style="margin: 10px 0 4px 0;" v-if="t.bizWeek" v-cloak>{{t.bizWeek}}</p>
            <el-table
              show-summary
              :data="t.rows"
              border
              fit
              :header-cell-style="{backgroundColor: '#e1e1e1', color: '#000'}"
              style="width: 100%;"
            >
              <el-table-column prop="userCode" label="用户昵称"></el-table-column>
              <el-table-column prop="loginId" label="昵称"></el-table-column>
              <el-table-column prop="currencyCode" label="货币"></el-table-column>
              <el-table-column prop="fee" label="费"></el-table-column>
              <el-table-column prop="login" label="登录"></el-table-column>
            </el-table>
            <div style="padding-left: 20px;" v-for="sub in t.rows" :key="sub.userCode">
              <h4 v-if="sub.children" v-cloak :key="i">{{ sub.userCode }}</h4>
              <el-table
                v-if="sub.children"
                show-summary
                :data="sub.children"
                border
                fit
                :header-cell-style="{backgroundColor: '#e1e1e1', color: '#000'}"
                style="width: 100%;"
              >
                <el-table-column prop="userCode" label="用户昵称"></el-table-column>
                <el-table-column prop="loginId" label="昵称"></el-table-column>
                <el-table-column prop="currencyCode" label="货币"></el-table-column>
                <el-table-column prop="fee" label="费"></el-table-column>
                <el-table-column prop="login" label="登录"></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </body>
      <script>${PlaceHolder.VueJs}</script>
      <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: ${JSON.stringify(data)},
              name: ${JSON.stringify(name)}
            }
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
          }
        })
      </script>
    </html>
  `
}

export const getLijiTpl = ({ data }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
      <div style="padding: 10px;">
        <div v-for="(t, i) in list" :key="i" class="table-item">
          <h3 v-if="t.name" v-cloak>{{t.name}}</h3>
          <el-table
            :data="t.data"
            border
            fit
            :header-cell-style="{backgroundColor: '#f5f7fa'}"
            style="width: 100%;"
          >
            <el-table-column prop="name" label="账号"> </el-table-column>
            <el-table-column prop="turnover" label="总投注金额"> </el-table-column>
            <el-table-column prop="grosscommission" label="总佣金"> </el-table-column>
            <el-table-column prop="payout" label="付款"> </el-table-column>
            <el-table-column prop="winloss" label="超级总代理盈利"> </el-table-column>
            <el-table-column prop="commission" label="超级总代理佣金"> </el-table-column>
            <el-table-column prop="total" label="超级总代理合计"> </el-table-column>
            <el-table-column prop="companywinloss" label="公司"> </el-table-column>
          </el-table>
        </div>
      </div>
      </div>
    </body>
      <script>${PlaceHolder.VueJs}</script>
      <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: ${JSON.stringify(data)},
              tableData: ${JSON.stringify(data)}
            }
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
            getSummariesMethod (t) {
              return (param) => {
                return this.getSummaries(param, t)
              }
            },
            getSummaries (param, total) {
              const { columns } = param
              const sums = []
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '总额'
                  return
                }
                const key = column.property
                if (total[key] && typeof total[key] === 'string') {
                  sums[index] = total[key]
                } else {
                  sums[index] = 'N/A'
                }
              })

              return sums
            }
          }
        })
      </script>
    </html>
  `
}

export const getPingboTpl = ({ data }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
      <div style="padding: 10px;">
        <div v-for="(t, i) in list" :key="i" class="table-item">
          <h3 v-if="t.name" v-cloak>{{t.name}}</h3>
          <el-table
            :data="t.data"
            border
            fit
            :header-cell-style="{backgroundColor: '#f5f7fa'}"
            style="width: 100%;"
          >
            <el-table-column prop="userCode" label="用户名称"></el-table-column>
            <el-table-column prop="nickname" label="账号"></el-table-column>
            <el-table-column prop="userLevel" label="级别">
              <template slot-scope="{ row }">
                <span v-if="row.userLevel === 'PL'">会员</span>
                <span v-if="row.userLevel === 'AG'">代理</span>
                <span v-if="row.userLevel === '总代'">会员</span>
                <span v-if="row.userLevel === '高级总代'">会员</span>
              </template>
            </el-table-column>
            <el-table-column prop="currency" label="货币"></el-table-column>
            <el-table-column prop="totalWager" label="Total Wager"> </el-table-column>
            <el-table-column prop="turnOver" label="营业额"> </el-table-column>
            <el-table-column prop="localVolume" label="总投注量"> </el-table-column>
            <el-table-column prop="localGrossCommission" label="总佣金"> </el-table-column>
            <el-table-column label="会员" align="center">
                  <el-table-column prop="levels.PL.localPnl" label="输/赢"></el-table-column>
                  <el-table-column prop="levels.PL.localNettCommission" label="佣金"></el-table-column>
                  <el-table-column prop="levels.PL.localTotal" label="总计"></el-table-column>
                </el-table-column>
            <el-table-column label="代理" align="center">
                  <el-table-column prop="levels.AG.localPnl" label="输/赢"></el-table-column>
                  <el-table-column prop="levels.AG.localNettCommission" label="佣金"></el-table-column>
                  <el-table-column prop="levels.AG.localTotal" label="总计"></el-table-column>
                </el-table-column>
            <el-table-column label="总代" align="center">
                  <el-table-column prop="levels.MA.localPnl" label="输/赢"></el-table-column>
                  <el-table-column prop="levels.MA.localNettCommission" label="佣金"></el-table-column>
                  <el-table-column prop="levels.MA.localTotal" label="总计"></el-table-column>
                </el-table-column>
            <el-table-column label="高级总代" align="center">
                  <el-table-column prop="levels.SMA.localPnl" label="输/赢"></el-table-column>
                  <el-table-column prop="levels.SMA.localNettCommission" label="佣金"></el-table-column>
                  <el-table-column prop="levels.SMA.localTotal" label="总计"></el-table-column>
                </el-table-column>
            <el-table-column prop="loginLevelWinLoss" label="公司"> </el-table-column>
          </el-table>
          <div style="padding-left: 20px;" v-for="sub in t.data" :key="sub.userCode">
            <h4 v-if="sub.children && sub.children.length" v-cloak :key="i">{{ sub.userCode }}</h4>
            <el-table
              v-if="sub.children && sub.children.length"
              :data="sub.children"
              border
              fit
              :header-cell-style="{backgroundColor: '#f5f7fa'}"
              style="width: 100%;"
            >
              <el-table-column prop="userCode" label="用户名称"></el-table-column>
              <el-table-column prop="nickname" label="账号"></el-table-column>
              <el-table-column prop="userLevel" label="级别">
                <template slot-scope="{ row }">
                  <span v-if="row.userLevel === 'PL'">会员</span>
                  <span v-if="row.userLevel === 'AG'">代理</span>
                  <span v-if="row.userLevel === '总代'">会员</span>
                  <span v-if="row.userLevel === '高级总代'">会员</span>
                </template>
              </el-table-column>
              <el-table-column prop="currency" label="货币"></el-table-column>
              <el-table-column prop="totalWager" label="Total Wager"> </el-table-column>
              <el-table-column prop="turnOver" label="营业额"> </el-table-column>
              <el-table-column prop="localVolume" label="总投注量"> </el-table-column>
              <el-table-column prop="localGrossCommission" label="总佣金"> </el-table-column>
              <el-table-column label="会员" align="center">
                    <el-table-column prop="levels.PL.localPnl" label="输/赢"></el-table-column>
                    <el-table-column prop="levels.PL.localNettCommission" label="佣金"></el-table-column>
                    <el-table-column prop="levels.PL.localTotal" label="总计"></el-table-column>
                  </el-table-column>
              <el-table-column label="代理" align="center">
                    <el-table-column prop="levels.AG.localPnl" label="输/赢"></el-table-column>
                    <el-table-column prop="levels.AG.localNettCommission" label="佣金"></el-table-column>
                    <el-table-column prop="levels.AG.localTotal" label="总计"></el-table-column>
                  </el-table-column>
              <el-table-column label="总代" align="center">
                    <el-table-column prop="levels.MA.localPnl" label="输/赢"></el-table-column>
                    <el-table-column prop="levels.MA.localNettCommission" label="佣金"></el-table-column>
                    <el-table-column prop="levels.MA.localTotal" label="总计"></el-table-column>
                  </el-table-column>
              <el-table-column label="高级总代" align="center">
                    <el-table-column prop="levels.SMA.localPnl" label="输/赢"></el-table-column>
                    <el-table-column prop="levels.SMA.localNettCommission" label="佣金"></el-table-column>
                    <el-table-column prop="levels.SMA.localTotal" label="总计"></el-table-column>
                  </el-table-column>
              <el-table-column prop="loginLevelWinLoss" label="公司"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      </div>
    </body>
      <script>${PlaceHolder.VueJs}</script>
      <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: ${JSON.stringify(data)},
              tableData: ${JSON.stringify(data)}
            }
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
            getSummariesMethod (t) {
              return (param) => {
                return this.getSummaries(param, t)
              }
            },
            getSummaries (param, total) {
              const { columns } = param
              const sums = []
              columns.forEach((column, index) => {
                if (index === 0) {
                  sums[index] = '总额'
                  return
                }
                const key = column.property
                if (total[key] && typeof total[key] === 'string') {
                  sums[index] = total[key]
                } else {
                  sums[index] = 'N/A'
                }
              })

              return sums
            }
          }
        })
      </script>
    </html>
  `
}

export const testTpl = ({ data, name }) => {
  return `
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <!-- import CSS -->
      <style>${PlaceHolder.ElementCss}</style>
      <style>
      .table-row-first:hover > td {
        background-color:#7392a6 !important;
        color: #fff;
      }
      </style>
    </head>
    <body>
      <div id="app">
        <div style="padding: 10px;" v-for="(item, i) in list">
          <h3 v-cloak :key="i">{{item.name}}</h3>
          <div v-for="(t, i) in item.data" :key="i" class="table-item">
            <p style="margin: 10px 0 4px 0;" v-if="t.bizWeek" v-cloak>{{t.bizWeek}}</p>
            <el-table
              show-summary
              :data="t.rows"
              border
              fit
              :header-cell-style="{backgroundColor: '#e1e1e1', color: '#000'}"
              style="width: 100%;"
            >
              <el-table-column prop="userCode" label="用户昵称"></el-table-column>
              <el-table-column prop="loginId" label="昵称"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </body>
    <script>${PlaceHolder.VueJs}</script>
    <script>${PlaceHolder.ElementJs}</script>
      <script>
        new Vue({
          el: '#app',
          data: function() {
            return {
              visible: false,
              list: [
                {
                  name: 'test',
                  data: [
                    {
                      rows: [
                        { userCode: 1234, loginId: 3333 }
                      ]
                    }
                  ]
                }
              ],
              name: ''
            }
          },
          mounted() {
            console.log(this.list)
          },
          methods: {
          }
        })
      </script>
    </html>
  `
}
